<template>
	<view class="cancellation_order">
		<view class="order_tips">是否需要为您同时取消以下订单</view>
		<view class="order_list_item_box">
			<view class="order_item_box" v-for="item in orderList" :key="item.id">
				<view class="order_status_box">
					<view class="name_status">
						<view class="name_transfer">
							<image
								class="check_img"
								@click="checkItem(item)"
								:src="
									item.checked
										? 'https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-13.png'
										: 'https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-12.png'
								"></image>
							<view class="studio_name">{{ item.studioName }}</view>
							<view class="transfer_order" v-if="item.studioDispatchNum">转单{{ item.studioDispatchNum }}次</view>
						</view>
						<view class="order_status">{{ getStatusText(item.status) }}</view>
					</view>
					<view class="order_date">订单号：{{ item.id }}</view>
				</view>
				<view class="order_server_info">
					<scroll-view class="multiple_specs_scroll" scroll-x="true" v-if="item?.orderGoodsSkuVOS?.length > 1">
						<view class="server_info_box" v-for="val in item.orderGoodsSkuVOS" :key="val.skuId">
							<image class="server_img" :src="val.goodsAvatar"></image>
							<view class="specs_box">{{ val.goodsName }}</view>
							<view class="server_price">×{{ val.serviceDays }}</view>
						</view>
					</scroll-view>
					<view class="server_info_box" v-if="item?.orderGoodsSkuVOS?.length == 1">
						<image class="server_img" :src="item?.orderGoodsSkuVOS[0]?.goodsAvatar"></image>
						<view class="name_price">
							<view class="server_name">{{ item?.orderGoodsSkuVOS[0]?.goodsName }}</view>
							<view class="specs_price">
								<text class="server_specs">{{ item?.orderGoodsSkuVOS[0]?.serviceTime }} | ¥{{ item?.orderGoodsSkuVOS[0]?.price }}</text>
								<!--								<text class="server_price"></text>-->
							</view>
						</view>
					</view>
					<view class="order_price_box">
						<view class="order_price">¥{{ item.payAmount }}</view>
						<view class="pay_text">{{ getPayText(item.status) }}</view>
					</view>
				</view>
				<view class="order_other_info_box">
					<view class="other_info_item" v-if="item.type != 1">
						<view class="other_label">宠物{{ item.petNum }}只</view>
						<view class="other_value">
							<text v-for="(val, valIndex) in item.petList" :key="valIndex">
								{{ val.petNickName }}({{ getPetTypeText(val.type) }})
								<text class="m_l_r_8" v-if="valIndex < item.petList.length - 1">|</text>
							</text>
						</view>
					</view>
					<view class="other_info_item">
						<view class="other_label">服务时间</view>
						<view class="other_value">{{ item.serviceStartTime?.substring(0, 10) }}&nbsp;{{ handleDoorTime(item.doorTime) }}</view>
					</view>
					<view class="other_info_item" v-if="item.type != 1">
						<view class="other_label">服务地址</view>
						<view class="other_value">{{ item.address }}</view>
					</view>
					<view class="other_info_item" v-if="item.joinId">
						<view class="other_label">关联订单</view>
						<view class="other_value">{{ item.joinId }}</view>
					</view>
					<view class="other_info_item" v-if="item.type == 1 && item?.petList?.length">
						<view class="other_label">服务宠物</view>
						<view class="other_value">
							<text class="pet_name_date" v-for="(val, i) in item.petList" :key="i">{{ val.petNickName }}</text>
						</view>
					</view>
				</view>
				<view class="pet_teacher_box" v-if="([2, 4].includes(item.status) && item.petsitterUserId && orderType == -1) || (item.petsitterUserId && orderType == 0)">
					<view class="pet_teacher_title">服务陪宠师</view>
					<image class="pet_teacher_img" :src="item.petsitterAvatar"></image>
					<view class="pet_teacher_name">{{ item.petsitterRealName }} | {{ item.petsitterNickName }}</view>
				</view>
			</view>
		</view>
		<view class="next_step_btn_box">
			<view class="next_step_btn" @click="nextStep()">下一步</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import api from "@/api/index";

let orderId = ref("");
let orderDetailId = ref("");
let orderType = ref("");
let checkedList = ref([]);
let orderList = reactive([]);
const getPayText = (type) => {
	if (orderType.value == -1) {
		switch (type) {
			case 0:
				return "应付";
			case 5:
			case 6:
			case 7:
				return "合计";
			default:
				return "实付";
		}
	} else {
		switch (type) {
			case 4:
			case 5:
				return "合计";
			default:
				return "实付";
		}
	}
};
const getStatusText = (status) => {
	switch (status) {
		case 0:
			return "待接单";
		case 1:
			return "待服务";
		case 2:
			return "服务中";
		case 3:
			return "已完成";
		case 4:
		case 5:
			return "已取消";
		case 6:
			return "待付款";
		default:
			return "";
	}
};
const getPetTypeText = (type) => {
	switch (type) {
		case 0:
			return "猫";
		case 1:
			return "狗";
		default:
			return "其他";
	}
};
const handleDoorTime = (data) => {
	if (data) {
		let dataArr = data?.split("~");
		if (dataArr[0] == "00:00" && dataArr[1] == "00:00") {
			return "无时间段要求";
		} else {
			return data;
		}
	} else {
		return data;
	}
};
// 获取其他待服务日单
const getOtherDayOrder = async () => {
	const { code, data } = await api({
		method: "get",
		url: `/mall/order/order-detail/getJoinOrderDetail`,
		data: {
			orderId: orderId.value,
			orderDetailId: orderDetailId.value
		}
	});
	if (code == 0) {
		if (data.length > 0) {
			data.forEach((item) => {
				if (item.id == orderDetailId.value) {
					item.checked = true;
				} else {
					item.checked = false;
				}
			});
			Object.assign(orderList, data);
		}
	}
};
const checkItem = (item) => {
	item.checked = !item.checked;
};
const nextStep = () => {
	checkedList.value = [];
	orderList.forEach((item) => {
		if (item.checked) {
			checkedList.value.push(item.id);
		}
	});
	if (checkedList.value.length > 0) {
		uni.showModal({
			title: "提示",
			content: "确定取消订单吗？",
			success: async (res) => {
				if (res.confirm) {
					uni.navigateTo({
						url: `/pages/petsOrder/cancellationReason/index?orderId=${orderId.value}&orderType=${orderType.value}&checkedList=${checkedList.value.toString()}`
					});
				}
			}
		});
	} else {
		uni.showToast({
			title: "请至少勾选一个订单",
			icon: "none"
		});
	}
};
onLoad((options) => {
	orderId.value = options.orderId;
	orderDetailId.value = options.orderDetailId;
	orderType.value = options.orderType;
	getOtherDayOrder();
});
onShow(() => {});
</script>

<style scoped lang="scss">
.cancellation_order {
	.order_tips {
		font-weight: bold;
		font-size: 32rpx;
		color: #1b2120;
		margin-top: 54rpx;
		padding: 0 32rpx;
		box-sizing: border-box;
	}

	.order_list_item_box {
		padding: 48rpx 32rpx 32rpx;
		padding-bottom: calc(var(--safe-area-bottom) + 104rpx + 74rpx);
		box-sizing: border-box;

		.order_item_box {
			width: 100%;
			background: #ffffff;
			border-radius: 24rpx;
			padding: 40rpx 32rpx;
			box-sizing: border-box;
			margin-bottom: 24rpx;

			.order_status_box {
				.name_status {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.name_transfer {
						display: flex;
						flex-direction: row;
						align-items: center;

						.check_img {
							width: 48rpx;
							height: 48rpx;
							border-radius: 50%;
							margin-right: 24rpx;
						}
					}

					.studio_name {
						font-weight: bold;
						font-size: 32rpx;
						color: #1b2120;
					}

					.transfer_order {
						display: flex;
						align-items: center;
						justify-content: center;
						padding: 0 8rpx;
						box-sizing: border-box;
						height: 40rpx;
						background: #7777f3;
						border-radius: 24rpx 24rpx 24rpx 0rpx;
						font-weight: 400;
						font-size: 24rpx;
						color: #ffffff;
						margin-left: 8rpx;
					}

					.order_status {
						font-weight: 400;
						font-size: 26rpx;
						color: #6363ff;
					}
				}

				.order_date {
					font-weight: 400;
					font-size: 24rpx;
					color: #808080;
					margin-top: 16rpx;
				}
			}

			.order_server_info {
				display: flex;
				justify-content: space-between;
				margin-top: 48rpx;

				.server_info_box {
					display: flex;
					align-items: center;
					flex-direction: row;
					width: calc(100% - 120rpx - 16rpx);

					.server_img {
						width: 120rpx;
						height: 120rpx;
						border-radius: 12rpx;
					}

					.name_price {
						margin-left: 16rpx;
						max-width: calc(100% - 120rpx - 16rpx);

						.server_name {
							font-weight: bold;
							font-size: 32rpx;
							color: #1b2120;
						}

						.specs_price {
							font-weight: 400;
							font-size: 26rpx;
							color: #7c807f;
							margin-top: 24rpx;
							text-overflow: ellipsis;
							white-space: nowrap;
							overflow: hidden;

							.server_specs {
							}

							.server_price {
							}
						}
					}
				}

				.multiple_specs_scroll {
					white-space: nowrap;
					width: calc(100% - 128rpx);

					.server_info_box {
						display: inline-block;
						width: 120rpx;
						height: 120rpx;
						border-radius: 12rpx;
						position: relative;
						margin-right: 16rpx;

						.server_img {
							width: 120rpx;
							height: 120rpx;
							border-radius: 12rpx;
						}

						.specs_box {
							position: absolute;
							top: 8rpx;
							left: 8rpx;
							padding: 4rpx;
							box-sizing: border-box;
							max-width: 98rpx;
							background: #f9f6f6;
							border-radius: 4rpx;
							font-weight: 400;
							font-size: 18rpx;
							color: #1b2120;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.server_price {
							position: absolute;
							bottom: 0;
							right: 0;
							padding: 8rpx 10rpx;
							box-sizing: border-box;
							background: rgba(0, 0, 0, 0.35);
							border-radius: 24rpx 0rpx 24rpx 0rpx;
							font-weight: bold;
							font-size: 18rpx;
							color: #ffffff;
						}
					}
				}

				.order_price_box {
					width: 128rpx;
					padding: 0 16rpx;
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					box-shadow: -12rpx 0 20rpx -18rpx rgba(0, 0, 0, 0.2);

					.order_price {
						font-weight: bold;
						font-size: 28rpx;
						color: #1b2120;
					}

					.pay_text {
						font-weight: 400;
						font-size: 24rpx;
						color: #7c807f;
						margin-top: 16rpx;
					}
				}
			}

			.order_other_info_box {
				width: 100%;
				border-radius: 16rpx;
				border: 2rpx solid #f9f6f6;
				padding: 32rpx 24rpx;
				box-sizing: border-box;
				margin-top: 16rpx;

				.other_info_item {
					display: flex;
					flex-direction: row;
					margin-bottom: 40rpx;

					.other_label {
						width: 96rpx;
						font-weight: bold;
						font-size: 24rpx;
						color: #5c5e5e;
					}

					.other_value {
						max-width: calc(100% - 96rpx - 16rpx);
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
						font-weight: 400;
						font-size: 24rpx;
						color: #7c807f;
						margin-left: 16rpx;

						.pet_name_date {
							display: inline-block;
							//margin-bottom: 24rpx;
							font-weight: 400;
							font-size: 24rpx;
							color: #7c807f;
							margin-right: 24rpx;
						}
					}
				}

				.other_info_item:last-child {
					margin-bottom: 0;
				}
			}

			.pet_teacher_box {
				display: flex;
				align-items: center;
				flex-direction: row;
				width: 100%;
				border-radius: 16rpx;
				border: 2rpx solid #f9f6f6;
				padding: 24rpx;
				box-sizing: border-box;
				margin-top: 16rpx;

				.pet_teacher_title {
					width: 130rpx;
					font-weight: bold;
					font-size: 24rpx;
					color: #5c5e5e;
				}

				.pet_teacher_img {
					margin-left: 16rpx;
					width: 32rpx;
					height: 32rpx;
					border-radius: 50%;
				}

				.pet_teacher_name {
					margin-left: 8rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #7c807f;
				}
			}
		}
	}

	.next_step_btn_box {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 8rpx 32rpx;
		box-sizing: border-box;
		background: #ffffff;
		border-top: 1rpx solid #e4e6e6;
		padding-bottom: calc(var(--safe-area-bottom) + 8rpx);

		.next_step_btn {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 88rpx;
			background: linear-gradient(90deg, #ff6188 0%, #ff5252 100%);
			border-radius: 62rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #ffffff;
		}
	}
}
</style>
